<style lang="stylus">
  #main {
    width : 37.5rem;
    height : 25rem;
  }
  .parent {
    display : flex;
    justify-content : center;
    align-items : center;
    flex-direction : column;
  }
  .btngroup {
    width : 37.5rem;
    display : flex;
    flex-direction : row;
    justify-content : space-between;
  }
  .return {
    color : white;
    padding : 1rem 2rem;
    font-size : 1rem;
    background-color : rgb(26, 188, 156);
    border-radius : 50% 10% 10% 50%;
    border : 0;
    font-weight : bold;
  }
  .forward {
    color : white;
    padding : 10px 30px;
    font-size : 1rem;
    background-color : rgb(231, 76, 60);
    border-radius : 10% 50% 50% 10% ;
    border : 0;
    font-weight : bold;
  }
</style>

<template lang="pug">
  div.parent
    div#main
    div.btngroup
      <router-link to="/" class="return" tag="button">返回</router-link>
      <router-link to="/Pie" class="forward" tag="button">环形图</router-link>
</template>

<script>
import echarts from 'echarts';

export default {
  name: "bar_graph",
  data: function() {
    return {
      echarts: '',
      opinion:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
      opinionData:[
        {value:335, name:'直接访问'},
        {value:310, name:'邮件营销'},
        {value:234, name:'联盟广告'},
        {value:135, name:'视频广告'},
        {value:1548, name:'搜索引擎'}
      ]
    };
  },
  methods: {
    testBuildBarGraph: function() {
      this.charts = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: '柱状图示例'
        },
        tooltip: {},
        legend: {
          data: ['数量']
        },
        xAxis: {
          data: this.opinion
        },
        yAxis: {},
        series: [{
          name: '数量',
          type: 'bar',
          data: this.opinionData
        }]
      };
      this.charts.setOption(option);
    }
  },
  mounted: function() {
    this.$nextTick(function() {
      this.testBuildBarGraph();
    });
  },
}
</script>
